﻿var ctx = document.querySelector("canvas").getContext("2d");
var ballctx;
var x = 100;    // произвольная нач. точка
var y = 50, dx = 2, dy = 4;
var width = ctx.canvas.width;
var height = ctx.canvas.height;

// загрузка изображения
ballImg = document.createElement("img");
ballImg.src = "Ball.png";

// после загрузки изображение может начинать прыгать
ballImg.onload = function () {
    var ball = document.createElement("canvas");
    ball.height = 50;
    ball.width = 50;
    ballctx = ball.getContext("2d");
    // трансформируем центр для правильного вращения
    ballctx.translate(25, 25);
    setInterval(draw, 10);
};

function draw() {
    ctx.clearRect(0, 0, width, height);
    ballctx.rotate(Math.PI / 180 * 5);  // 5 градусов
    if (x + dx + 25 > width || x + dx - 25 < 0) {
        dx = -dx;
    }
    if (y + dy + 25 > height || y + dy - 25 < 0) {
        dy = -dy;
    }
    x += dx;
    y += dy;    
    // рисуем в положении 0, 0
    ballctx.drawImage(ballImg, 0, 0, ballImg.width, ballImg.height, -25, -25, 50, 50);
    // копирование источника после поворота
    ctx.drawImage(ballctx.canvas, x, y);        
}